<template>
<div id="home">
    <div>
        <b-navbar toggleable="lg" type="dark" variant="info" id="nav">
            <b-navbar-brand >{{currentUser.username}}</b-navbar-brand>

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                    <b-nav-item @click="showAllUsers()">所有用户</b-nav-item>
                    <b-nav-item @click="showAllPosts()">好友动态</b-nav-item>
                    <b-nav-item @click="startGroup()">发起群聊</b-nav-item>
                    <b-nav-item @click="joinGroup()">加入群聊</b-nav-item>
                </b-navbar-nav>

                <!-- Right aligned nav items -->
                <b-navbar-nav class="ml-auto">

                    <b-form-input v-model="username" :disabled="!showUsers" size="sm" class="mr-sm-2" placeholder="查找用户" @keyup.enter="searchUsers()"></b-form-input>

                    <!-- <b-nav-item-dropdown text="Lang" right>
                        <b-dropdown-item href="#">EN</b-dropdown-item>
                        <b-dropdown-item href="#">ES</b-dropdown-item>
                        <b-dropdown-item href="#">RU</b-dropdown-item>
                        <b-dropdown-item href="#">FA</b-dropdown-item>
                    </b-nav-item-dropdown> -->

                    <b-nav-item-dropdown right>
                        <!-- Using 'button-content' slot -->
                        <template v-slot:button-content>
                            <em>个人中心</em>
                        </template>
                        <b-dropdown-item href="#">修改密码</b-dropdown-item>
                        <b-dropdown-item href="/login">退出登录</b-dropdown-item>
                    </b-nav-item-dropdown>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>
    </div>

    <md-dialog :md-active.sync="showDialog">
        <md-dialog-title>创建群聊</md-dialog-title>
        <md-field>
            <label>房间号</label>
            <md-input v-model="groupNo"></md-input>
        </md-field>
        <md-field>
            <label>群组名称</label>
            <md-input v-model="groupName"></md-input>
        </md-field>
        <md-field>
            <label>密码</label>
            <md-input v-model="groupPassword" type="password"></md-input>
        </md-field>
        <md-dialog-actions>
            <md-button class="md-primary" @click="showDialog = false">取消</md-button>
            <md-button class="md-raised md-primary" @click="createGroup">创建</md-button>
        </md-dialog-actions>
        
    </md-dialog>

    <md-dialog :md-active.sync="showDialog2">
        <md-dialog-title>加入群聊</md-dialog-title>
        <md-field>
            <label>房间号</label>
            <md-input v-model="groupNo"></md-input>
        </md-field>
        
        
        <md-dialog-actions>
            <md-button class="md-primary" @click="showDialog = false">取消</md-button>
            <md-button class="md-raised md-primary" @click="joinOneGroup">加入</md-button>
        </md-dialog-actions>
        
    </md-dialog>

    <Posts v-show="showPosts" />

    <div class="users" v-show="showUsers">

        <UserList v-for="user in users" :key="user.id" :user="user" />

    </div>
</div>
</template>

<script>
import user from '../api/user'
import groupApi from '../api/group'
import UserList from '../components/UserList'
import Posts from '../components/Posts'
export default {
    name: 'Home',
    components: {
        UserList,
        Posts
    },
    created() {
        user.getAllUsers().then(res => {
            // window.console.log(res)
            this.users = res.data;
        }).catch(err => {
            window.console.error(err);
        })
    },
    data() {
        return {
            showDialog2: false,
            username:'',
            showPosts:true,
            showUsers:false,
            groupPassword:'',
            groupNo: 1234,
            groupName: '',
            showDialog: false,
            users: [],
        }
    },
    mounted(){
        document.body.style.backgroundImage = null;
    },
    computed: {
        currentUser() {
            return this.$store.state.user;
        }
    },
    methods: {
        joinOneGroup(){
            this.$router.push(`group_chat/${this.groupNo}`);
        },
        joinGroup(){
            this.showDialog2 = true;
            this.groupNo = '';
        },
        searchUsers(){
            this.users = this.users.filter(user=> user.username == this.username);
        },
        showAllPosts(){
            this.showUsers = false;
            this.showPosts = true;
        },
        showAllUsers(){
            this.showUsers = true;
            this.showPosts = false;
        },
        createGroup(){
            groupApi.createGroup({
                creator:this.currentUser,
                name:this.groupName,
                group_id:this.groupNo,
                password:this.groupPassword,
                users:[this.currentUser]
            }).then(res=>{
                window.console.log(res.data);
                this.$router.push(`group_chat/${this.groupNo}`);
            }).catch(err=>{
                window.console.log(err.response);
            })
        },
        startGroup() {
            this.showDialog = true;
            this.groupNo = Math.floor((Math.random() * 1000000));
            this.groupPassword = '';
            this.groupName = '';
        }
    }
}
</script>

<style lang="scss" scoped>
$mobile-width:600px;

.users {
    width: 100vw;

}

.md-dialog{
    padding: 1rem 2rem;
}

@media (min-width: $mobile-width) {

    .users {
        width: 40vw;
        margin: 0 auto;

    }

    .md-dialog {
        width: 30vw;
        
    }
}
</style>
